<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        管理
        <small>列表</small>
    </h1>
</section>

<!-- Main content -->
<section class="content" id="curriculum-app">

    <div class="row">
        <div class="col-md-12">
            <a v-show="show.list" class="btn btn-default" @click="getList">刷新</a>
            <a v-show="show.list" class="btn btn-info" @click="add">添加</a>
            <a v-show="show.edit" class="btn btn-danger" @click="show.edit=false;show.list=true;">关闭</a>
        </div>
    </div>

    <div class="row" v-show="show.list">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>分类</th>
                    <th>封面</th>
                    <th>价格</th>
                    <th>集数</th>
                    <th>销量(实际/运营)</th>
                    <th>观看数(实际/运营)</th>
                    <th>类型</th>
                    <th>难度</th>
                    <th>适合用户</th>
                    <th>促销活动</th>
                    <th>推荐</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list" :style="{color: item.hide ? '#999' : '#000'}">
                    <td>{{item.curriculum_id}}</td>
                    <td>{{item.curriculum_name}}</td>
                    <td>{{item.curriculum_class | CurriClass}}</td>
                    <td>
                        <a class="avatar" :href="item.curriculum_pic" target="_blank">
                            <img :src=" item.curriculum_pic + '?x-oss-process=image/resize,h_64' ">
                        </a>
                    </td>
                    <td>&yen;{{item.curriculum_sale_price}}</td>
                    <td>{{item.curriculum_episode_number}}</td>
                    <td>{{item.sales_volume}} / {{item.buy_total}}</td>
                    <td>{{item.view_total}} / {{item.video_view}}</td>
                    <td>{{Types[item.curriculum_type]}}</td>
                    <td>{{Levels[item.curriculum_level]}}</td>
                    <td>{{UserLevels[item.curriculum_suit_user]}}</td>
                    <td>{{item.sales_title || '无'}}</td>
                    <td>{{item.rec_id ? '已推荐' : ''}}</td>
                    <td>
                        <a class="btn btn-primary btn-xs" @click="edit(item)">编辑</a>

                        <a v-if="item.hide" class="btn btn-info btn-xs" @click="hide(item)">上架</a>
                        <a v-if="!item.hide" class="btn btn-warning btn-xs" @click="hide(item)">下架</a>

                        <span v-if="!item.hide">
                            <a v-if="item.rec_id" class="btn btn-danger btn-xs" @click="recommend(item,1)">取消推荐</a>
                            <a v-if="!item.rec_id" class="btn btn-warning btn-xs" @click="recommend(item,0)">加推荐</a>
                        </span>

                        <a v-if="!item.hide" class="btn btn-info btn-xs" @click="positionAdd(item)">内容推荐</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <pagination :total="page.total" :limit="page.limit" :offset="page.offset" @turn="turnPage" ></pagination>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row" v-show="show.edit">
        <div class="col-md-8 col-md-offset-2">
            <h3>编辑</h3>
            <div class="form" role="form">
                <div class="form-group ">
                    <label>名称</label>
                    <input class="form-control" v-model="edit_item.curriculum_name">
                </div>

                <div class="form-group">
                    <label>分类 <a class="btn btn-info btn-xs" @click="getClasses">刷新</a></label>
                    <select class="form-control" v-model="edit_item.curriculum_class">
                        <option v-for="c in classes" :value="c.class_id">{{c.class_name}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>类型 </label>
                    <select class="form-control" v-model="edit_item.curriculum_type" @change="changeType(edit_item)">
                        <option v-for="(t,i) in Types" :value="i">{{t}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>难度等级 </label>
                    <select class="form-control" v-model="edit_item.curriculum_level">
                        <option v-for="(l,i) in Levels" :value="i">{{l}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>适合用户等级 </label>
                    <select class="form-control" v-model="edit_item.curriculum_suit_user">
                        <option v-for="(l,i) in UserLevels" :value="i">{{l}}</option>
                    </select>
                </div>

                <div class="form-group ">
                    <label>封面(16:9)</label>
                    <file-uploader v-model="edit_item.curriculum_pic" filetype="image" oss="true" policyurl="/alioss/get_policy"></file-uploader>
                </div>
                <div class="form-group">
                    <label>摘要（可用于seo）</label>
                    <textarea class="form-control" v-model="edit_item.curriculum_summary"></textarea>
                </div>
                <div class="form-group ">
                    <label>介绍</label>
                    <ck-editor v-model="edit_item.curriculum_description" :tag="editTag"></ck-editor>
                </div>

                <div class="form-group">
                    <label>购买方式</label>
                    <select class="form-control" v-model="edit_item.enable_pay_type">
                        <option value="1">现金购买</option>
                        <option value="2">积分兑换</option>
                    </select>
                </div>

                <div class="form-group" v-show="2 == edit_item.enable_pay_type">
                    <label>积分兑换数(仅设置积分兑换时有效)</label>
                    <input class="form-control" v-model="edit_item.credit_cost" type="number" min="0" step="1"/>
                </div>

                <div class="form-group">
                    <label style="width: 100%">售价(￥)</label>
                    <input class="form-control" style="width:40%;display:inline-block" v-model="edit_item.curriculum_sale_price" type="number" min="0" step="0.01">
                    <span class="form-control disabled" style="width:10%;display:inline-block">快速选择: </span>
                    <select class="form-control" style="width:40%;display:inline-block" v-model="edit_item.curriculum_sale_price">
                        <option v-for="(t,v) in PresetPrices" :value="v">{{t}}</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>市场价(￥)</label>
                    <input class="form-control" v-model="edit_item.curriculum_market_price">
                </div>

                <div class="form-group">
                    <label>苹果内购价格(￥) {{edit_item.apple_pay_price}}</label>
                    <select class="form-control" v-model="edit_item.apple_pay_price">
                        <option v-for="item in ApplePayPrice" :value=" item.price + '.00' ">{{item.label}} - {{item.grade}}</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>苹果内购产品ID</label>
                    <input class="form-control" v-model="edit_item.apple_pay_production_id">
                </div>

                <div class="form-group">
                    <label>销量</label>
                    <input class="form-control" v-model="edit_item.buy_total">
                </div>

                <div class="form-group">
                    <label>观看数</label>
                    <input class="form-control" v-model="edit_item.video_view">
                </div>

                <div class="form-group">
                    <label>促销活动 <a class="btn btn-info btn-xs" @click="getSales">刷新</a></label>
                    <select class="form-control" v-model="edit_item.curriculum_sales">
                        <option value="0">无</option>
                        <option v-for="s in sales" :value="s.sales_id">{{s.sales_title}}</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="form-label" for="service_enable">开启绑定服务：</label>
                    <input type="checkbox" v-model="edit_item.service_enable" id="service_enable">
                </div>
                <div class="form-group col-md-12" v-if="edit_item.service_enable">
                    <div class="form-md-1">
                        <a class="btn btn-info btn-xs" @click="getColumnList">刷新</a>
                    </div>
                    <div class="col-md-3">
                        <select class="form-control" v-model="edit_item.bind_column_id">
                            <option :value="null">---关联专栏---</option>
                            <option v-for="col in columnList" :value="col.id">{{col.title}}({{col.teacher_name}})</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">在线课程：<input type="checkbox" v-model="edit_item.online_course"></label>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">复盘解惑：<input type="checkbox" v-model="edit_item.fupan_answer"></label>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">专属群服务：<input type="checkbox" v-model="edit_item.exclusive_group"></label>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">个股分析报告：<input type="checkbox" v-model="edit_item.stock_analysis_report"></label>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">内参：<input type="checkbox" v-model="edit_item.article_reference"></label>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">研报：<input type="checkbox" v-model="edit_item.article_report"></label>
                    </div>
                </div>
                <div class="form-group" v-if="edit_item.service_enable">
                    <label class="col-md-2">服务期：</label>
                    <input class="form-control" type="number" step="1" min="0" v-model="edit_item.expired">
                </div>

                <div class="form-group">
                    <a class="btn btn-primary" @click="save">保存</a>
                    <a class="btn btn-default" @click="show.edit=false;show.list=true;">关闭</a>
                </div>
            </div>
        </div>
    </div>

    <!--内容推荐-->
    <div class="row" v-show="show.position">
        <div class="box-header">
            <h3>内容推荐</h3>
        </div>
        <div class="box-body">
            <position-add v-model="positionData" :item_type="2" item_url="/course/" ref="positionModal"></position-add>
        </div>
        <div class="box-footer">
            <button type="button" class="btn btn-primary pull-right" @click="positionSave()">推荐</button>
            <button type="button" class="btn btn-default pull-left" @click="show.position=false;show.list=true">取消</button>
        </div>
    </div>
    <!--内容推荐 /-->
</section>
<!-- /.content -->

<script>
    function Curriculum(type) {

        this.curriculum_type = type;

        this.curriculum_sale_price = 0;
        this.curriculum_sales = 0;

        this.curriculum_level = 1;
        this.curriculum_suit_user = 1;

        this.enable_pay_type = 1;

        this.curriculum_description = null;

        this.hide = true;

        this.apple_pay_price = '0.00';


        this.service_enable = true;

    }

    function Service() {
        this.bind_column_id = null;
        this.online_course = false;
        this.fupan_answer = false;
        this.exclusive_group = false;
        this.stock_analysis_report = false;
        this.expired = 90;
        this.article_reference = false;
        this.article_report = false;
    }

    var curriculum_app = new Vue({
        el: '#curriculum-app',
        data: {
            list: [],
            columnList: [],
            edit_item: new Curriculum(),
            editTag: Math.random(),
            page: {
                total: 0,
                limit: 10,
                offset: 0
            },
            classes: [],
            sales: [],
            show: {
                list: true,
                edit: false,
                position: false,
            },
            Types: {
                1: '高级课',
                2: '公开课',
                3: 'VIP课程',
            },
            Levels: {
                1:'初级',
                2:'中级',
                3:'高级'
            },
            UserLevels: {
                1: '小白',
                2: '韭菜',
                3: '菜鸟',
                4: '老手',
                5: '专家',
                6: '大神'
            },
            PresetPrices: {
                '0': '免费',
                '188': '￥188',
                '888': '￥888',
                '2980': '￥2980',
                '6800': '￥6800',
                '9800': '￥9800',
                '19800': '￥19800',
                '29800': '￥29800',
                '68000': '￥68000',
                '198000': '￥198000'
            },
            ApplePayPrice: ApplePayPrice,
            positionData: {},  //内容推荐数据
        },
        created: function () {
            this.getClasses();
            this.getSales();
            this.getList();
            this.getColumnList();
        },
        methods: {
            getList: function () {
                ajax({
                    uri: '/curriculum/list',
                    data: this.page,
                    success: function(resp){
                        this.list = resp.list;
                        this.page.total = resp.total;
                    }.bind(this)
                });
            },
            getClasses: function () {
                ajax({
                    uri: '/curriculum/class_names',
                    success: function (resp) {
                        this.classes = resp.data;
                    }.bind(this)
                })
            },
            getSales: function () {
                ajax({
                    uri: '/sale/list_available',
                    success: function (resp) {
                        this.sales = resp.data;
                    }.bind(this)
                })
            },
            getColumnList: function () {
                ajax({
                    uri: '/common/column_names',
                    data: {teacher_id: 0},
                    success: function (resp) {
                        this.columnList = resp.data;
                    }.bind(this)
                })
            },
            add: function () {
                this.edit_item = Object.assign(new Curriculum(1), new Service());
                this.show.list = false;
                this.show.edit = true;
                this.editTag = Math.random();
            },
            edit: function (item) {
                console.log(item);
                var temp = Object.assign(new Curriculum(1), item);
                if (!('expired' in item) || null === item.expired) {
                    temp = Object.assign(temp, new Service())
                }
                console.log(temp);
                this.edit_item = temp;
                this.show.list = false;
                this.show.edit = true;
                this.editTag = Math.random();
            },
            changeType: function (item) {
                if (2 == item.curriculum_type)
                    item.curriculum_sale_price = 0;
            },
            save: function () {
                var item = this.edit_item;
                if (!item.curriculum_class || !item.curriculum_name ||
                    !item.curriculum_description || !item.curriculum_pic) {
                    alert('请完善资料！');
                    return;
                }

                ajax({
                    uri: '/curriculum/save',
                    data: item,
                    success: function(resp){
                        console.log(resp);
                        this.show.list = true;
                        this.show.edit = false;
                        this.getList();
                    }.bind(this)
                });
            },
            hide: function (item) {
                var hide = item.hide ? 0 : 1;
                ajax({
                    uri: '/curriculum/set_hide',
                    data: {id: item.curriculum_id, hide: hide},
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            },
            turnPage: function (offset) {
                this.page.offset = offset;
            },
            recommend: function (item, op = 0) {
                ajax({
                    uri: '/curriculum/recommend',
                    data: {
                        rec_id: item.rec_id,
                        rec_item_id: item.curriculum_id,
                        rec_item_type: 2,
                        cancel: op
                    },
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            },

            /* 内容推荐 */
            positionAdd: function (item) {
                let self = this;
                this.positionData = {
                    itemId: item.curriculum_id,
                    itemTitle: item.curriculum_name,
                    itemImg: item.curriculum_pic
                };

                this.show.list = false;
                self.show.position = true;
                setTimeout(function () {
                    self.$refs.positionModal.loadData(self.positionData);
                }, 50);
            },
            positionSave: function () {
                let self = this;
                self.$refs.positionModal.save(function () {
                    self.show.list = true;
                    self.show.position = false;
                });
            }
            /* 内容推荐 end */
        },
        filters: {
            /**
             * @return {string}
             */
            CurriClass: function (cid) {
                const classes = curriculum_app.classes;
                for (var i=0; i<classes.length; i++) {
                    const t = classes[i];
                    if (t.class_id === cid) {
                        return t.class_name;
                    }
                }
                return '';
            }
        },
        watch: {
            'page.offset': function (nv, ov) {
                this.getList();
            }
        }
    });
</script>